<template>
  <el-dialog :close-on-click-modal="closeonclickmodal" width="600px" :title="getdialogTitle()" @open="listenopen()"
             @close="close"
             :visible="dialogshow">
    <div :id="target">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane  v-for="(x,index) in data" :key="x.id" :label="x.name" :name="index+''">
          <div v-if="x.perms.length>0">
            <div  style="float:left;margin:5px 8px 0 0;" v-for="(y,index) in x.perms" :key="y.id">
              <el-tag size="medium" type="primary" v-html="y.desc"/>
            </div>
          </div>
          <h3 v-else style="text-align: center;">该角色未赋权</h3>
        </el-tab-pane>
      </el-tabs>
      <el-row style="text-align: right">
        <el-button size="mini" type="primary" @click="dialogshow = false">确 定</el-button>
      </el-row>
    </div>
    <div style="margin-top:20px"></div>
  </el-dialog>
</template>
<script>
  import {Message} from "element-ui"

  export default {
    inject: ["reload"],
    data() {
      return {
        target:"showUserPerms",
        activeName: 0,
        data: [],
        isajax: false,
        slide_h: (window.document.body.offsetHeight - 214),
        closeonclickmodal: true,
      }
    },
    props: ['dialogshow', 'dialoginfo'],
    methods: {
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      init() {
        this.isajax = true;
        this.proAPI.getJson(this.proAPI.URLS.getAllPermsBySysUserId,{userId:this.dialoginfo.id}).then((res) => {
          if (res != null) {
            this.data = res.data;
          } else {

          }
          this.isajax = false;
        })
      },
      getdialogTitle() {
        return "账号【" + this.dialoginfo.name + "】的角色及权限";
      },
      listenopen() {
        // console.log("弹窗打开了");
        this.init();
      },
      close() {
        this.$emit('changedialogshow')
      }
    },
    updated() {
      // console.log(333);
    },
    mounted() {
      this.init();
      // console.log("开始创建！！！！！！！！");
    }
  };
</script>
<style lang="css" scoped>
  .el-dialog__body {
    padding: 10px 20px 1px 20px;
    color: #606266;
    font-size: 14px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin: 8px;
  }

</style>
